<template>
  <div id="building">
    <div id="login">
      <h2 id="title">Mentor登录</h2>
      <el-form
        label-width="80px"
        :model="ruleForm"
        ref="ruleForm"
        class="login_form"
      >
      <!--       2021012475 赵筠高雅-->
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"> </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onLogin()" class="btn"
            >登录</el-button
          >
          <el-button type="primary" @click="onRegister()" class="btn"
            >返回注册页面</el-button
          >
          <el-button type="primary" @click="onHello()" class="btn"
            >返回欢迎页面</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  <script>
export default {
  name: "UserLogin",
  data() {
    return {
      ruleForm: {
        name: "",
        password: "",
      },
    };
  },
  methods: {
    onLogin() {
      console.log(this.ruleForm.name), console.log(this.ruleForm.password);
      this.$axios
        .post("/login", {
          name: this.ruleForm.name,
          password: this.ruleForm.password,
        })
        .then((successResponse) => {
          if (successResponse.data.code === 200) {
            this.$router.push({ path: "/HomePage" }); 
          }
        })
        .catch((failResponse) => {
          if (failResponse.data.code == 400) {
            this.$router.push({ path: "/UserLogin" }); 
          }
        });
    },
    //回到欢迎页面
    onHello() {
      this.$router.push({ path: "/HelloUse" });
    },
    onRegister() {
      this.$router.push({ path: "/UserRegister" });
    },
  },
};
</script>
  <style scoped>
#building {
  background: url("../assets/back.JPG");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
* {
  margin: 0;
  padding: 0;
}
#login {
  width: 450px;
  padding: 20px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #238E68;
}
#title {
  font-size: 40px;
  color: #238E68;
  margin-left: 75px;
  margin-top: 40px;
}
.btn {
  margin-top: 20px;
  width: 110px;
  height: 50px;
  background-color: #238e68;
  border-color: #238e68;
}
</style>
